<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>UI Customizaton Prototype</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="behaviour.js" type="text/javascript"></script>
<script src="dojo/dojo.js" type="text/javascript"></script>
<script type="text/javascript">
    dojo.require("dojo.event.*");       // sophisticated AOP event handling
    dojo.require("dojo.dnd.*");         // drag-and-drop
    dojo.require("dojo.fx.*");          // animations and eye candy
	dojo.require("dojo.widget.FloatingPane");
	dojo.require("dojo.widget.TabPane");
	dojo.require("dojo.widget.Tooltip");
	dojo.require("dojo.widget.LinkPane");
	dojo.require("dojo.widget.ContentPane");
	dojo.require("dojo.widget.LayoutPane");






dojo.require("dojo.widget.SplitPane");
	dojo.require("dojo.widget.ColorPalette");
	dojo.require("dojo.widget.Tree");
	dojo.require("dojo.widget.MonthlyCalendar");
	dojo.require("dojo.widget.html.DatePicker");
	dojo.require("dojo.io.*");
	dojo.require("dojo.text.textDirectory");

</script>


<!-- link rel="stylesheet" href="../test.css" type="text/css" / -->

<style type="text/css" media="screen">
	html, body {
		font-family: sans-serif;
		font-size: 10pt;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		width: 100%;	/* make the body expand to fill the visible window */
		height: 100%;
		overflow: hidden;	/* erase window level scrollbars */
	}
	
	.dojoTabContainer {
	  padding: 10px 10px 10px 10px;
	}

  </style>
</head>

<body >

<div dojoType="LayoutPane"
	layoutChildPriority="top-bottom"
	style="width: 100%; height: 100%; ">

	<div dojoType="ContentPane" layoutAlign="top">
		<b>Logo</b>
	</div>
	<div dojoType="ContentPane" layoutAlign="bottom" style="background-color: #274383; color: white;">
		Status Bar
	</div>
	<!-- In reality, these would be loaded independently via an href. -->
	<div id="ttabs" dojoType="TabPane" labelPosition="top" style="width: 100%; height: 30em; margin: 10px 10px 10px 10px;" 
		selectedTab="xttab2" closeButton="tab"
		layoutAlign="client">

		<div id="ttab1" dojoType="ContentPane" label="Home" onClose="testClose">
			<div dojoType="FloatingPane" title="Actions" hasShadow="true" resizable="true" contentWrapper="none" style="width: 20%; height: 80%;">
				<div dojoType="ContentPane" layoutAlign="client">
					<a href="#">Dashboard 1</a><br/>
					<a href="#">Dashboard 2</a><br/>
					<a href="#">Dashboard 3</a>
				</div>
			</div>
			<div dojoType="FloatingPane" title="Dashboard" hasShadow="true" resizable="true" contentWrapper="none" style="left: 23%; width: 75%; height: 80%;">
				<div dojoType="ContentPane" layoutAlign="client">
				</div>
			</div>
		</div>
		<div id="ttab2" dojoType="ContentPane" label="Contacts" onClose="testClose">
		</div>
		<div id="ttab3" dojoType="ContentPane" label="Calendar" onClose="testClose">
			<div id="Calendar" dojoType="monthlycalendar" ></div>
		</div>
		<div id="ttab4" dojoType="ContentPane" label="Setup" onClose="testClose">
			<div dojoType="datepicker" style="width: 100px; height: 100px;></div>
		</div>
	</div> <!-- ttabs -->

</div> <!-- LayoutPane -->
<!-- ------------------------------------------------------------------------------------------------- -->
<script type="text/javascript">
 // <![CDATA[
	function testClose(pane, tab) {
	  return confirm("Please confirm that you want to close tab " + tab.label);
	}

// HOW DO context menus work????
	Behaviour.register({
		'xxx' : function(element) {
			element.onDblClick = function(event) {
				return false;
			}
		}
	});

 // ]]>
 </script>

</body>
</html>
